<template>
    <div style="display: flex; margin-top: 20px" class="look-item">
        <div class="box-con">
            <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
                <img :src="heart_rate" alt="" />
                心率
            </div>
            <div style="display: flex">
                <div style="display: flex; width: 45%" class="border-d">
                    <div class="label-d">
                        <div>心率最大值</div>
                        <div>心率最小值</div>
                        <div>心率平均值</div>
                    </div>
                    <div class="value-d">
                        <div>{{ getNum(props.infoData?.heartRateStat?.max) }}（次/分钟）</div>
                        <div>{{ getNum(props.infoData?.heartRateStat?.min) }}（次/分钟）</div>
                        <div>{{ getNum(props.infoData?.heartRateStat?.avg) }}（次/分钟）</div>
                    </div>
                </div>
                <div style="display: flex; width: 45%; margin-left: 10%">
                    <div class="label-d">
                        <div>静息心率最大值</div>
                        <div>静息心率最小值</div>
                        <div>静息心率平均值</div>
                    </div>
                    <div class="value-d">
                        <div>{{ getNum(props.infoData?.heartRateStat?.silenceMax) }}（次/分钟）</div>
                        <div>{{ getNum(props.infoData?.heartRateStat?.silenceMin) }}（次/分钟）</div>
                        <div>{{ getNum(props.infoData?.heartRateStat?.silenceAvg) }}（次/分钟）</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-con-small">
            <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
                <img :src="blood" alt="" />
                血氧
            </div>
            <div style="display: flex">
                <div style="display: flex; width: 100%">
                    <div class="label-d">
                        <div>血氧最大值</div>
                        <div>血氧最小值</div>
                        <div>血氧平均值</div>
                    </div>
                    <div class="value-d">
                        <div>{{ getNum(props.infoData?.bloodOxygenAllStat?.max) }}（%）</div>
                        <div>{{ getNum(props.infoData?.bloodOxygenAllStat?.min) }}（%）</div>
                        <div>{{ getNum(props.infoData?.bloodOxygenAllStat?.avg) }}（%）</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="display: flex; margin-top: 20px" class="look-item">
        <div class="box-con">
            <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
                <img :src="sleep" alt="" />
                睡眠
            </div>
            <div style="display: flex">
                <div style="display: flex; width: 45%" class="border-d">
                    <div class="label-d">
                        <div>夜间睡眠次数</div>
                        <div>夜间睡眠最长时长</div>
                        <div>夜间睡眠最短时长</div>
                        <div>夜间睡眠总时长</div>
                    </div>
                    <div class="value-d">
                        <div>{{ getNum(props.infoData?.sleepStat?.num) }}（次）</div>
                        <div>{{ getTime(getNum(props.infoData?.sleepStat?.timeMax)) }}</div>
                        <div>{{ getTime(getNum(props.infoData?.sleepStat?.timeMin)) }}</div>
                        <div>{{ getTime(getNum(props.infoData?.sleepStat?.timeTotal)) }}</div>
                    </div>
                </div>
                <div style="display: flex; width: 45%; margin-left: 10%">
                    <div class="label-d">
                        <div>零星小睡次数</div>
                        <div>零星睡眠最长时长</div>
                        <div>零星小睡最短时长</div>
                        <div>零星睡眠总时长</div>
                    </div>
                    <div class="value-d">
                        <div>{{ getNum(props.infoData?.sleepStat?.napNum) }}（次）</div>
                        <div>{{ getTime(getNum(props.infoData?.sleepStat?.napTimeMax)) }}</div>
                        <div>{{ getTime(getNum(props.infoData?.sleepStat?.napTimeMin)) }}</div>
                        <div>{{ getTime(getNum(props.infoData?.sleepStat?.napTimeTotal)) }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-con-small">
            <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
                <img :src="pressure" alt="" />
                压力
            </div>

            <div style="display: flex">
                <div style="display: flex; width: 100%">
                    <div class="label-d">
                        <div>压力最大值</div>
                        <div>压力最小值</div>
                        <div>压力平均值</div>
                        <div style="opacity: 0">血氧平均值</div>
                    </div>
                    <div class="value-d">
                        <div>{{ getNum(props.infoData?.stressStat?.max) }}</div>
                        <div>{{ getNum(props.infoData?.stressStat?.min) }}</div>
                        <div>{{ getNum(props.infoData?.stressStat?.avg) }}</div>
                        <div style="opacity: 0">88</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="display: flex; margin-top: 20px" class="look-item">
        <div class="box-con-long">
            <div style="display: flex; align-items: center; padding: 30px 20px 10px; justify-content: flex-start">
                <img :src="temperature" alt="" />
                运动
            </div>
            <div style="display: flex; justify-content: space-between">
                <div style="width: calc(70% - 20px); padding: 0 20px 20px">
                    <div style="display: flex">
                        <div style="display: flex; width: 45%" class="border-d">
                            <div class="label-d">
                                <div>运动最大距离</div>
                                <div>运动最小距离</div>
                                <div>运动总距离</div>
                                <div>运动距离有效次数</div>
                            </div>
                            <div class="value-d">
                                <div>{{ getK(getNum(props.infoData?.exerciseStat?.distanceMax)) }}</div>
                                <div>{{ getK(getNum(props.infoData?.exerciseStat?.distanceMin)) }}</div>
                                <div>{{ getK(getNum(props.infoData?.exerciseStat?.distanceTotal)) }}</div>
                                <div>{{ getNum(props.infoData?.exerciseStat?.distanceValidNum) }}（次）</div>
                            </div>
                        </div>
                        <div style="display: flex; width: 45%; margin-left: 10%" class="border-d-d">
                            <div class="label-d">
                                <div>最大卡路里</div>
                                <div>最小卡路里</div>
                                <div>总卡路里</div>
                                <div>卡路里有效次数</div>
                            </div>
                            <div class="value-d">
                                <div>{{ getC(getNum(props.infoData?.exerciseStat?.kcalMax)) }}</div>
                                <div>{{ getC(getNum(props.infoData?.exerciseStat?.kcalMin)) }}</div>
                                <div>{{ getC(getNum(props.infoData?.exerciseStat?.kcalTotal)) }}</div>
                                <div>{{ getNum(props.infoData?.exerciseStat?.kcalValidNum) }}（次）</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 30%; margin-left: 20px; padding: 0 20px 20px">
                    <div style="display: flex">
                        <div style="display: flex; width: 100%">
                            <div class="label-d">
                                <div>运动最大时长</div>
                                <div>运动最小时长</div>
                                <div>运动总时长</div>
                                <div>运动有效次数</div>
                            </div>
                            <div class="value-d">
                                <div>{{ getTime(getNum(props.infoData?.exerciseStat?.timeMax)) }}</div>
                                <div>{{ getTime(getNum(props.infoData?.exerciseStat?.timeMin)) }}</div>
                                <div>{{ getTime(getNum(props.infoData?.exerciseStat?.timeTotal)) }}</div>
                                <div>{{ getNum(props.infoData?.exerciseStat?.timeValidNum) }}（次）</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="display: flex; margin-top: 20px" class="look-item">
        <div class="box-con">
            <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
                <img :src="temperature" alt="" />
                体温
            </div>
            <div style="display: flex">
                <div style="display: flex; width: 45%" class="border-d">
                    <div class="label-d">
                        <div>体温最大值</div>
                        <div>体温最小值</div>
                        <div>体温平均值</div>
                    </div>
                    <div class="value-d">
                        <div>{{ getNum(props.infoData?.bodyTempOverviewStat?.max) }}（℃）</div>
                        <div>{{ getNum(props.infoData?.bodyTempOverviewStat?.min) }}（℃）</div>
                        <div>{{ getNum(props.infoData?.bodyTempOverviewStat?.avg) }}（℃）</div>
                    </div>
                </div>
                <div style="display: flex; width: 45%; margin-left: 10%">
                    <div class="label-d">
                        <div>体表温度最大值</div>
                        <div>体表温度最小值</div>
                        <div>体表温度平均值</div>
                    </div>
                    <div class="value-d">
                        <div>{{ getNum(props.infoData?.bodyTempOverviewStat?.skinMax) }}（℃）</div>
                        <div>{{ getNum(props.infoData?.bodyTempOverviewStat?.skinMin) }}（℃）</div>
                        <div>{{ getNum(props.infoData?.bodyTempOverviewStat?.skinAvg) }}（℃）</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="box-con-small">
            <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
                <img :src="allStep" alt="" />
                步数
            </div>

            <div style="display: flex">
                <div style="display: flex; width: 100%">
                    <div class="label-d">
                        <div>{{ paramsDate === '0' ? '总步数值' : '最大步数值' }}</div>
                        <div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">最小步数值</div>
                        <div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">平均步数值</div>
                    </div>
                    <div class="value-d">
                        <div>{{ getNum(props.infoData?.sdcStat?.max) }}</div>
                        <div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">{{ getNum(props.infoData?.sdcStat?.min) }}</div>
                        <div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">{{ getNum(props.infoData?.sdcStat?.avg) }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { propTypes } from '/@/utils/propTypes';

    const blood = new URL('/@/assets/images/blood_oxygen.png', import.meta.url).href;
    const heart_rate = new URL('/@/assets/images/heart_rate.png', import.meta.url).href;
    const temperature = new URL('/@/assets/images/temperature.png', import.meta.url).href;
    const allStep = new URL('/@/assets/images/allStep.png', import.meta.url).href;
    const pressure = new URL('/@/assets/images/pressure.png', import.meta.url).href;
    const sleep = new URL('/@/assets/images/sleep.png', import.meta.url).href;
    const props = defineProps({
        infoData: propTypes.object.def({}),
        paramsDate: propTypes.string.def('0'),
    });

    function getTime(time) {
        if (time < 60) {
            return `0 时 ${time} 分`;
        }
        return `${(time - (time % 60)) / 60} 时 ${time % 60} 分`;
    }

    function getC(c) {
        return c === 0 ? 0 + '（千卡）' : parseFloat(c / 1000).toFixed(3) + '（千卡）';
    }

    function getK(k) {
        return k === 0 ? 0 + '（km）' : parseFloat(k / 1000).toFixed(3) + '（km）';
    }

    function getNum(num) {
        if (num) {
            return num;
        }
        return 0;
    }
</script>
<style scoped lang="less">
    .look-item {
        color: #fff;
    }

    .box-con {
        width: calc(70% - 20px);
        border: 1px solid #129bff;
        padding: 20px;
    }

    .box-con-small {
        width: 30%;
        margin-left: 20px;
        border: 1px solid #129bff;
        padding: 20px;
    }

    .box-con-long {
        width: 100%;
        border: 1px solid #129bff;
    }

    img {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }

    .label-d {
        width: 50%;
        color: #fff;
    }

    .value-d {
        width: 50%;
        text-align: center;
    }

    .border-d {
        position: relative;

        &:after {
            content: '';
            height: 90%;
            width: 1px;
            position: absolute;
            right: 0;
            top: 5%;
            background-color: #129bff;
        }
    }

    .border-d-d {
        position: relative;

        &:after {
            content: '';
            height: 90%;
            width: 1px;
            position: absolute;
            right: -20px;
            top: 5%;
            background-color: #129bff;
        }
    }

    .label-d,
    .value-d {
        div {
            padding: 5px 0;
        }
    }
</style>
